<template>
<div class="MV">
  <div class="filter-wrap">
<!--    地区-->
    <div class="seciton-wrap">
      <span class="seciton-type">地区：</span>
        <ul class="tabs-wrap">
          <li class="tab"><span class="title" :class="{active:area=='全部'}" @click="area='全部'">全部</span></li>
          <li class="tab"><span class="title" :class="{active:area=='内地'}" @click="area='内地'">内地</span></li>
          <li class="tab"><span class="title" :class="{active:area=='港台'}" @click="area='港台'">港台</span></li>
          <li class="tab"><span class="title" :class="{active:area=='欧美'}" @click="area='欧美'">欧美</span></li>
          <li class="tab"><span class="title" :class="{active:area=='日本'}" @click="area='日本'">日本</span></li>
          <li class="tab"><span class="title" :class="{active:area=='韩国'}" @click="area='韩国'">韩国</span></li>
        </ul>
    </div>
<!--    类型-->
    <div class="type-wrap">
      <span class="type-type">类型：</span>
      <ul class="tabs-wrap">
        <li class="title">
          <span class="title" :class="{active:type=='全部'}" @click="type='全部'">全部</span>
        </li>
        <li class="title">
          <span class="title" :class="{active:type=='官方版'}" @click="type='官方版'">官方版</span>
        </li>
        <li class="title">
          <span class="title" :class="{active:type=='原声'}" @click="type='原声'">原声</span>
        </li>
        <li class="title">
          <span class="title" :class="{active:type=='现场版'}" @click="type='现场版'">现场版</span>
        </li>
        <li class="title">
          <span class="title" :class="{active:type=='网易出品'}" @click="type='网易出品'">网易出品</span>
        </li>
      </ul>
    </div>
<!--    排序-->
    <div class="order-wrap">
      <span class="order-type">排序：</span>
        <ul class="tabs-wrap">
          <li class="tab">
            <span class="title" :class="{active:order=='上升最快'}" @click="order='上升最快'">上升最快</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:order=='最热'}" @click="order='最热'">最热</span>
          </li>
          <li class="tab">
            <span class="title" :class="{active:order=='最新'}" @click="order='最新'">最新</span>
          </li>
        </ul>
    </div>
  </div>
<!--  mv容器-->
  <div class="mvs">
    <div class="items">
      <div class="item" v-for="(item,index) in list" :key="index" @click="playmv">
        <div class="img-wrap">
        <img :src="item.cover" alt="">
        <div class="num-wrap">
          <div></div>
          <div class="num">{{item.playCount}}</div>
        </div>
        </div>
        <div class="info-wrap">
          <div class="name">{{item.name}}</div>
          <div class="singer">{{item.artistName}}/div>
        </div>
      </div>
    </div>
  </div>
  <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :page-size="10"
      :current-page="page"
      :total="total">
  </el-pagination>


</div>
</div>
</template>

<script>
//导入
import axios from "axios";
export default {
  name: "MV",
  data(){
    return{
      list:[],
      //总条数
      total:20,
      //页码
      page:1,
      //页容量
      limit:8,
      //地区
      area:'全部',
      //类型
      type:'类型',
      //排序
      order:'上升到最快'
    };
  },
  watch:{
    area(){
      this.getList()
      this.page = 1
    },
    type(){
      this.getList()
      this.page = 1
    },
    order(){
      this.getList()
      this.page = 1
    }
  },
  created(){
    this.getList()
  },
  methods:{
    playmv(){
      alert('暂不支持播放mv哦~')
    },
    handleCurrentChange(val){
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getList()
    },
    getList(){
      axios({
        url:'https://autumnfish.cn/mv/all',
        method:'get',
        params:{
          area:this.area,
          type:this.type,
          order:this.order,
          limit:this.limit,
          offset:(this.page-1)*this.limit
        }
      }).then(res=>{
        // console.log(res)
        this.list = res.data.data
        for(let i =0;i<this.list.length;i++){
          if(this.list[i].playCount > 100000){
            this.list[i].playCount = parseInt(this.list[i].playCount/10000) + '万'
          }
        }

        //保存总条数
        //接口问题 有count就赋值
        if(res.data.count){
          this.total = res.data.count
        }

      })
    }
  }
}
</script>

<style scoped>
  .MV{
    width: 1100px;
    margin: auto;
    /*background-color: #6a6fff;*/
    padding-bottom: 50px;
  }
  li{
    list-style: none;
  }
  .seciton-wrap,
  .type-wrap,
  .order-wrap
  {
    display: flex;
    height: 30px;
    /*background-color: rebeccapurple;*/
    margin: 20px 0;
    line-height: 30px;
  }
  .tabs-wrap{
    display: flex;
  }
  ul li{
    border-right: 1px solid #dedede;
  }
  ul li span{
    margin: 0 20px;
    padding:  0 20px;
    border-radius: 15px;

  }

  .mvs{
    width: 1100px;
    position: relative;
  }
  .mvs .items{
    display: flex;
    flex-wrap: wrap;
  }
  .mvs .items .item{
    /*background-color: #ffa22d;*/
    width: 275px;
    height: 213px;
  }
  .mvs .items .item .img-wrap{
    width: 250px;
    height: 150px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
  }
  .mvs .items .item .img-wrap img {
    width: 250px;
    height: 150px;
  }
  .mvs .items .item .img-wrap span img{
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .mvs .items .item .img-wrap .num{
    position: absolute;
    right: 5px;
    top: 2px;
    color: #ffffff;
  }
  .mvs .items .item .info-wrap .name{
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mvs .items .item .info-wrap .singer{
    color: #c6c6c6;
    font-size: 13px;
  }
  .active{
    color: #ffa22d;
    background-color: red;
    opacity: 0.5;
  }
</style>